<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>品牌管理</title>
    <link rel="stylesheet" href="/plugins/bootstrap/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="/plugins/adminLTE/css/AdminLTE.css"/>
    <link rel="stylesheet" href="/plugins/adminLTE/css/skins/_all-skins.min.css"/>
    <link rel="stylesheet" href="/css/style.css"/>
    <!-- 分页模块开始 -->
	<script src="/plugins/angularjs/angular.min.js"></script>
    <link rel="stylesheet" href="/plugins/angularjs/pagination.css"/>
    <script src="/plugins/angularjs/pagination.js"></script>
    <!-- 分页模块结束 -->
	<script src="/plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="/plugins/bootstrap/js/bootstrap.min.js"></script>
	<!--引入service和controller和模板-->
	<script src="/js/base-pagination.js"></script>
	<script src="/js/service/baseService.js"></script>
	<script src="/js/controller/baseController.js"></script>
	<script src="/js/controller/brandController.js"></script>

	<!--<script type="text/javascript">

		// 定义模块
		var app = angular.module('pinyougou', ['pagination']);

		// 模块添加控制器
		app.controller('brandController', function ($scope, $http) {

            /** 分页指令配置信息对象  */
            $scope.paginationConf = {
                currentPage: 1, // 当前页码
                totalItems: 0,  // 总记录数
                itemsPerPage: 10, // 每页显示的记录数
                perPageOptions: [10, 20, 30], // 页码下拉列表框
                onChange: function(){ // 改变事件
                    $scope.reload(); //重新加载
                }
            };
            /** 重新加载列表数据 */
            $scope.reload = function(){
                /** 切换页码  */
                $scope.search($scope.paginationConf.currentPage,
                    $scope.paginationConf.itemsPerPage);
            };
            /** 分页查询品牌信息 */

            /** 定义查询条件对象 */
            $scope.searchEntity = {};
			// 多条件分页查询品牌
            $scope.search = function(page, rows){
                /** 发送异步请求分页查询品牌数据 */
                $http({
					url:"/brand/findByPage?page="+ page +"&rows=" + rows,
                    method : 'get',
                    params : $scope.searchEntity

				}).then(function(response){
                        $scope.dataList = response.data.rows;
                        /** 更新总记录数 */
                        $scope.paginationConf.totalItems = response.data.total;
                    });
            };

            /** 定义一个选中的ids*/
            $scope.ids = [];

            /** 为复选框绑定点击事件 */
            $scope.updateSelection = function($event, id) {
                /** 如果是被选中,则增加到数组 */
                if($event.target.checked){
                    $scope.ids.push(id);
                }else{
                    var idx = $scope.ids.indexOf(id);
                    /** 删除数组中的元素  */
                    $scope.ids.splice(idx, 1);
                }
            };
            /** 批量删除  */
            $scope.delete = function(){
                if ($scope.ids.length > 0){
                    /** 发送异步请求 */
                    $http.get('/brand/delete?ids=' + $scope.ids).then(
                        function(response){
                            if(response.data){
                                /** 重新加载品牌数据 */
                                $scope.reload();
                            }else{
                                alert("删除失败")
							}
                        }
                    );
                }else{
                    alert("请选择要删除的品牌！");
                }
            };





            //添加或者修改,根据id来判断是否是添加或者修改，如果是id有值就是修改，否则是否添加
            $scope.saveOrUpdate = function () {
				var url = "save";//保存品牌
				if($scope.entity.id){
				    url = "update"//修改品牌
				}


				$http.post("/brand/" + url,$scope.entity).then(function (response) {

                    if (response.data) {
                        //重新加载品牌数据
                        $scope.reload(); //重新加载

                    }else{
                        alert("保存失败");
                    }

				});
            };
            // 为修改按钮绑定点击事件
            $scope.show = function (entity) {
                // 把entity 对象转化成一个新的json对象

                // 把json对象转化成json字符串
                var jsonStr = JSON.stringify(entity);
                // 把json字符串转化成json对象
                $scope.entity = JSON.parse(jsonStr);
            };


        });

	</script>-->

</head>
<body class="hold-transition skin-red sidebar-mini"
	  ng-app="pinyougou"
	  ng-controller="brandController">
	<!-- .box-body -->
	<div class="box-header with-border">
		<h3 class="box-title">品牌管理</h3>
	</div>

	<div class="box-body">
		<!-- 数据表格 -->
		<div class="table-box">
			<!--工具栏-->
			<div class="pull-left">
				<div class="form-group form-inline">
					<div class="btn-group">
						<button type="button" class="btn btn-default" title="新建"
								data-toggle="modal" data-target="#editModal" ng-click="entity={};">
							<i class="fa fa-file-o"></i> 新建</button>
						<button type="button" class="btn btn-default" title="删除" ng-click="delete();">
							<i class="fa fa-trash-o"></i> 删除</button>
						<button type="button" class="btn btn-default" title="刷新"
								onclick="window.location.reload();"><i class="fa fa-refresh"></i> 刷新</button>
					</div>
				</div>
			</div>
			<div class="box-tools pull-right">
				<div class="has-feedback">
					<!--  查询条件区-->
					<table>
						<tr>
							<td><input class="form-control" placeholder="品牌名称" ng-model="searchEntity.name">
							</td>
							<td><input class="form-control" placeholder="首字母" ng-model="searchEntity.firstChar">
							</td>
							<td>
								<button type="button" class="btn btn-default"  ng-click="reload()">
									<i class="fa fa-trash-o"></i> 查询
								</button>
							</td>
						</tr>
					</table>
				</div>
			</div><br/>
			<!--工具栏/-->
			<!--数据列表-->
			<table id="dataList" class="table table-bordered table-striped table-hover dataTable">
				<thead>
					<tr>
						<th class="" style="padding-right:0px">
							<input id="selall" type="checkbox" class="icheckbox_square-blue" ng-click="checkAll($event)"
								   ng-checked="ckAll">
						</th> 
						<th class="sorting_asc">品牌ID</th>
						<th class="sorting">品牌名称</th>									      
						<th class="sorting">品牌首字母</th>									     				
						<th class="text-center">操作</th>
					</tr>
				</thead>
				<tbody>
					<tr ng-repeat="entity in dataList">
						<td><input  type="checkbox"  ng-checked="checkedArr[$index]" ng-click="updateSelection($event,entity.id,$index);"></td>
						<td>{{entity.id}}</td>
						<td>{{entity.name}}</td>
						<td>{{entity.firstChar}}</td>
						<td class="text-center">                                           
							<button type="button" class="btn bg-olive btn-xs"
									data-toggle="modal" data-target="#editModal"
									ng-click="show(entity);">修改</button>
						</td>
					</tr>
				</tbody>
			 </table>
            <!--数据列表/-->
            <!-- 分页指令显示分页标签 -->
            <tm-pagination conf="paginationConf"/>
		</div>
		<!-- 数据表格 /-->
	 </div>
     <!-- /.box-body -->
       
	<!-- 编辑窗口 -->
	<div class="modal fade" id="editModal" tabindex="-1" role="dialog"
		 aria-labelledby="myModalLabel" aria-hidden="true">
	  <div class="modal-dialog" >
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close"
						data-dismiss="modal" aria-hidden="true">×</button>
				<h3 id="myModalLabel">品牌编辑</h3>
			</div>
			<div class="modal-body">		
				<table class="table table-bordered table-striped"  width="800px">
					<tr>
						<td>品牌名称</td>
						<td><input  class="form-control" ng-model="entity.name" placeholder="品牌名称" >  </td>
					</tr>		      	
					<tr>
						<td>首字母</td>
						<td><input  class="form-control" ng-model="entity.firstChar" placeholder="首字母">  </td>
					</tr>		      	
				 </table>				
			</div>
			{{entity}}
			<div class="modal-footer">						
				<button class="btn btn-success" data-dismiss="modal"
						ng-click="saveOrUpdate()"
						aria-hidden="true">保存</button>
				<button class="btn btn-default" data-dismiss="modal"
						aria-hidden="true">关闭</button>
			</div>
		  </div>
		</div>
	</div>
</body>
</html>